<template>
  <div class="page-body">
    <PageHeadFooter page="home">
      <div class="item_1 hide-max-1120 flex">
        <div class="left flex-y-center">
          <img src="@/assets/logo.png" class="logo" alt="" />
          <div class="">
            Ever Fortune Enterprise<br />
            (H.K.) Co., LTD
          </div>
        </div>
        <div class="right flex-w-1">
          <div class="top1 flex-y-center flex-x-end">
            <!-- <div style="flex: 2"></div> -->
            <div class="u-line-1 font-18 font-center" style="flex: 1"></div>
          </div>
          <div class="top2 flex-y-center flex-x-sa">
            <div class="m-r-20 flex-x-end">
              <div class="cspt" style="cursor: default">
                <span class="iconfont icon-phone color-999"></span>
                Tel: +86 (0)21 5603 8298
              </div>
            </div>
            <div class="m-r-20 flex-x-end">
              <a
                href="mailto:sales@efehk.co"
                style="text-decoration: none; color: #000"
              >
                <div class="cspt">
                  <span class="iconfont icon-youjian color-999"></span>
                  sales@efehk.co
                </div>
              </a>
            </div>
            <div class="m-r-20 flex-x-end">
              <div class="cspt" style="cursor: default">
                <span class="iconfont icon-dingwei color-999"></span>
                RM 614, 6/F Concordia Plaza, 1 Science Museum Road, TST East,
                Kowloon, HongKong
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item_2 flex-col flex-x-center flex-y-center">
        <div class="el-size">Trading, Leasing, &amp; Storage</div>

        <p>
          We deliver over 30,000 units to USA&amp;CA market including most of
          basic &amp;inland ports every year. We can provide general product and
          special containers in China, Europe and North America
        </p>
      </div>

      <div class="item_21 p-y-60">
        <div class="w1120">
          <div class="font-600-36 font-center" style="margin-bottom: 80px">
            New &amp; Used Shipping Containers For Sale
          </div>
          <div class="flex-x-sb">
            <div class="item_21_div">
              <img
                class="important-img"
                src="@/assets/images/item_21_1.png"
                alt=""
              />
              <div>
                <div class="font-600-24 font-center p-y-20">
                  Shipping Containers in North America
                </div>
                <div class="font-20 p-x-20">
                  We deliver over 30,000 units to USA&amp;CA market including
                  most of basic &amp;inland ports every year. We provide general
                  product and other special containers such as refrigerated
                  containers, double-open, side-door containers, open top
                  containers, mini-size containers, half-height and flatracks in
                  most of basic &amp;inland ports
                </div>
              </div>
            </div>
            <div class="item_21_div">
              <img
                class="important-img"
                src="@/assets/images/item_21_2.png"
                alt=""
              />
              <div>
                <div class="font-600-24 font-center p-y-20">
                  Shipping Containers in Europe
                </div>
                <div class="font-20 p-x-20">
                  We deliver more than 3.000 TEU to Europe market every year.
                  (Include RAL1015, RAL7013, RAL5013, RAL5010). In Central
                  Europe and Eastern Europe, we can provide the full range of
                  color and type 40HC &amp;20GP in a reasonable price.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="item_6 p-y-60 bg-f8">
        <div class="w1120">
          <img
            class="m-r-30 important-img"
            src="@/assets/images/item_22_1.png"
            alt=""
          />
          <div class="">
            <!-- <div class="font-22">
              <img
                class="m-r-10"
                width="31px"
                src="@/assets/images/item6_2.jpg"
                alt=""
              />
              COMPASS CHASSIS
            </div> -->
            <div class="font-600-50 p-t-20">Leasing Service</div>

            <div class="m-t-20 font-18">
              As a competitive container leasing &amp; Trading company, we have
              built an extensive and close customer base with many powerful
              shipping companies and forwarding company. Driven to exceed
              customer expectations by delivering operational excellence. Ever
              Fortune specialize in building strong, professional and united
              core teams that are built to advance skill sets, grow, and
              flourish.
            </div>
            <!-- <a class="item_5-a a-bt" href="">
              <span>(510) 777-8339</span>
            </a> -->
          </div>
        </div>
      </div>
      <div class="item_6 p-y-60 bg-fff">
        <div class="w1120">
          <div class="">
            <!-- <div class="font-22">
              <img
                class="m-r-10"
                width="31px"
                src="@/assets/images/item6_2.jpg"
                alt=""
              />
              COMPASS CHASSIS
            </div> -->
            <div class="font-600-50 p-t-20">Storage Service</div>

            <div class="m-t-20 font-18">
              As a company with deep interests in China, Europe and North
              America. We have completed depot network in major port in China,
              Europe and America which can provide container sales &amp;
              leasing, Commission sale,storage and repair service.
            </div>
            <!-- <a class="item_5-a a-bt" href="">
              <span>(510) 777-8339</span>
            </a> -->
          </div>
          <img
            class="m-l-30 important-img"
            src="@/assets/images/item_23_1.png"
            alt=""
          />
        </div>
      </div>

      <div class="item-swiper">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div v-for="i in 18" :key="i" class="swiper-slide">
              <img
                :src="`${require(`@/assets/images/index_swiper/${i}.jpg`)}`"
                alt=""
              />
            </div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </PageHeadFooter>
  </div>
</template>

<script>
import '@/assets/js/flexible.js';
import PageHeadFooter from './components/page-head-footer.vue';
import '@/assets/css/swiper.min.css';
import '@/assets/js/swiper.min.js';

export default {
  components: {
    PageHeadFooter,
  },
  data() {
    return {
      searchValue: '',
      tableContent: [
        {
          jobTitle: 'UTR Driver',
          location: 'Wilmington, CA',
          hide: false,
        },
        {
          jobTitle: 'Trailer Mechanic and Mechanic Helper',
          location: 'Adelanto, CA',
          hide: false,
        },
        {
          jobTitle: 'GATE CLERK',
          location: 'Wilmington, CA',
          hide: false,
        },
        {
          jobTitle: 'Chassis/Trailer Mechanics',
          location: 'Wilmington, CA',
          hide: false,
        },
      ],
    };
  },
  created() {
    this.swiperStart();
  },
  methods: {
    swiperStart() {
      this.$nextTick(() => {
        var swiper = new Swiper('.swiper-container', {
          // pagination: '.swiper-pagination',
          slidesPerView: 3,
          freeMode : true,
          paginationClickable: true,
          spaceBetween: 30,
          loop : true,
          autoplay: 1000,
        });
      });
    },
    onSearch() {
      console.log(this.searchValue);
      let b = false;
      for (let i = 0; i < this.tableContent.length; i++) {
        let item = this.tableContent[i];
        if (
          item.jobTitle.toLowerCase().indexOf(this.searchValue) != -1 ||
          item.location.toLowerCase().indexOf(this.searchValue) != -1
        ) {
          b = true;
          break;
        }
      }
      if (b && this.searchValue.length) {
        this.tableContent.forEach(item => {
          if (
            item.jobTitle.toLowerCase().indexOf(this.searchValue) != -1 ||
            item.location.toLowerCase().indexOf(this.searchValue) != -1
          ) {
            item.hide = false;
          } else {
            item.hide = true;
          }
        });
      } else {
        this.tableContent = this.$options.data().tableContent;
      }
    },
  },
  directives: {},
};
</script>

<style lang="scss">
@media screen and (max-width: 1120px) {
  .important-img {
    width: 2.8646 * 1.5rem;
    aspect-ratio: 1/1;

    &:hover {
      transform: translateY(0.0417 * 1.5rem);
      transition: all 0.3s ease-out;
    }
  }
}
</style>
<style lang="scss" scoped>
.a-bt {
  margin-top: 20px;
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background: #395aa0;
  letter-spacing: 0.3px;
  font-size: 15px;

  &:hover {
    background: #000;
  }
}

.bg-f8 {
  background: #f8f7f8;
}

.p-y-80 {
  padding: 80px 0;
}

.important-img {
  width: vw(550);
  aspect-ratio: 1/1;
  border-radius: vw(0.2);

  &:hover {
    transform: translateY(vh(8));
    transition: all 0.3s ease-out;
  }
}

.item-swiper {
  height: vh(550);
  .swiper-container {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

@media screen and (min-width: 1120px) {
  .item_1 {
    height: 130px;

    .left {
      flex: 2;
      min-width: 410px;
      height: 130px;
      background: linear-gradient(to bottom, #142f5f, #28519d);
      color: rgba($color: #fff, $alpha: 0.8);
      padding-left: 20px;
      position: relative;
      font-weight: 600;
      font-size: 20px;

      &::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;

        border: 65px #fff solid;
        border-left-color: transparent;
        border-bottom-color: transparent;
      }

      .logo {
        width: 54px;
        margin-right: 10px;
      }
    }

    .right {
      flex: 7;

      .top1 {
        height: 50px;
        border-bottom: 1px solid #999;
      }

      .top2 {
        padding-right: 20px;
        height: 65px;

        > div {
          .cspt {
            height: 100%;
            position: relative;
            padding-left: 40px;

            .iconfont {
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              color: #bbb;
              font-size: 35px;
            }

            &:hover {
              color: #1a5edd;
            }
          }
        }
      }
    }
  }

  .item_2 {
    padding: 0 30px;
    background: url('../../assets/images/head-img.png') center / cover no-repeat;

    height: 564px;
    word-break: break-word;
    word-wrap: break-word;
    font-size: 26px;
    color: rgba($color: #fff, $alpha: 1);

    .el-size {
      font-weight: 600;
      box-sizing: border-box;
      padding-top: 10px;
      font-size: 44px;
      letter-spacing: 0.1px;
      text-align: center;
    }

    p {
      text-align: center;
      width: 800px;
      margin: 0 auto;
    }
  }

  .item_21 {
    .item_21_div {
      flex: 1;
      width: 0;
      line-height: 1.5;
      text-align: center;

      img {
        display: block;
        margin: 0 auto;
        width: vw(550);
        border-radius: 0.2vw;
        object-fit: cover;
      }
    }
  }

  .item_6 {
    .w1120 {
      display: flex;
      align-items: center;
      line-height: 1.4;

      > img {
        margin-right: 30px;
      }
    }
  }
}

@media screen and (max-width: 1120px) {
  .hide-max-1120 {
    display: none;
  }

  .item_2 {
    padding: 0 0.1563 * 192px;
    background: url('../../assets/images/head-img.png') center / cover no-repeat;

    height: 564px;
    word-break: break-word;
    word-wrap: break-word;
    font-size: 26px;
    color: rgba($color: #fff, $alpha: 1);

    .el-size {
      font-weight: 600;
      box-sizing: border-box;
      padding-top: 10px;
      font-size: 44px;
      letter-spacing: 0.0005 * 192px;
      text-align: center;
    }

    p {
      text-align: center;
      width: 800px;
      margin: 0 auto;
    }
  }
  .item_21 {
    .item_21_div {
      flex: 1;
      width: 0;
      line-height: 1.5;
      text-align: center;

      img {
        display: block;
        margin: 0 auto;
        width: vw(550);
        border-radius: 0.2vw;
        object-fit: cover;
      }
    }
  }
  .item_6 {
    padding: 20px;

    .w1120 {
      display: flex;
      align-items: center;

      > img {
        margin-right: 0.1563rem;
      }
    }
  }
}
</style>
